<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加商品</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
			<el-row :gutter="30">
				<el-col :span="8">
					<el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getOrderList">
						<template #append>
							<el-button icon="Search" @click="getOrderList" />
						</template>
					</el-input>
				</el-col>
			</el-row>
			<!-- 表格区域 -->
			<el-table :data="orderList" border stripe>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column prop="order_number" label="订单编号" width="300px"></el-table-column>
				<el-table-column prop="order_price" label="订单价格" width="180px"></el-table-column>
				<el-table-column prop="order_pay" label="是否付款" width="150px">
					<template #default="{ row }">
						<el-tag v-if="row.order_pay == 1" type="success" size="default" disable-transitions>已付款</el-tag>
						<el-tag v-else type="danger" size="default" disable-transitions>未付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="is_send" label="是否发货" width="140px"></el-table-column>
				<el-table-column prop="create_time" label="下单时间">
					<template #default="{ row }">
						{{ $dayjs(row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250px">
					<template #default="{ row }">
						<!-- 修改 -->
						<el-button type="primary" size="small" @click="showBox">修改</el-button>
						<!-- 删除 -->
						<el-button type="success" size="small" @click="showProgressBox">查询物流</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination v-model:current-page="queryInfo.pagenum" v-model:page-size="queryInfo.pagesize"
				:page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" />
		</el-card>
		<!-- 修改地址对话框 -->
		<el-dialog v-model="addressVisible" :title="'修改地址'" width="500px" @close="addressDialogClosed">
			<el-form ref="addressFormRef" style="max-width: 600px" :model="addressForm" :rules="addressFormRules"
				label-width="auto">
				<el-form-item label="省市区/县" prop="address1">
					<el-cascader v-model="addressForm.address1" :options="citydata" placeholder="请选择省市区/县"
						:props="{ value: 'code', label: 'name', children: 'children', expandTrigger: 'hover' }" clearable
						style="width: 100%" />
				</el-form-item>
				<el-form-item label="详细地址" prop="address2">
					<el-input v-model="addressForm.address2" style="width: 100%" />
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="addressVisible = false">取消</el-button>
					<el-button type="primary" @click="addressVisible = false">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<!--物流查询对话框 -->
		<el-dialog v-model="progressVisible" :title="'物流进度'" width="500px">
			<!-- 时间线 -->
			<el-timeline style="max-width: 600px">
				<el-timeline-item v-for="(item, index) in processInfo" :key="index" :timestamp="item.timestamp">
					{{ item.context }}
				</el-timeline-item>
			</el-timeline>
		</el-dialog>
	</div>
</template>
<script>
import citydata from './citydata'
export default {
	data() {
		return {
			citydata: citydata,
			queryInfo: {
				query: '',
				pagenum: 1,
				pagesize: 10
			},
			total: 0,
			orderList: [],
			addressVisible: false,
			addressForm: {
				address1: [],
				address2: ''
			},
			addressFormRules: {
				address1: [{
					required: true,
					message: '请选择省市区/县名称',
					trigger: 'blur'
				},],
				address2: [{
					required: true,
					message: '请填写详细地址',
					trigger: 'blur'
				},]
			},
			progressVisible: false,
			processInfo: [],
		}
	},
	created() {
		this.getOrderList()
	},
	methods: {
		async getOrderList() {
			let data = await this.$axios.get('orders', {
				params: this.queryInfo
			})
			// console.log(data)
			if (data.data.meta.status !== 200) {
				return this.$message.error("获取订单列表失败")
			} else {
				this.orderList = data.data.data.goods
				this.total = data.data.data.total
				console.log(data)
			}
		},
		// 监听 页码值 改变
		handleCurrentChange(newPage) {
			// console.log(newPage)
			this.queryInfo.pagenum = newPage
			this.getOrderList()
		},
		// 监听分页 改变
		handleSizeChange(newSize) {
			// console.log(newSize)
			this.queryInfo.pagesize = newSize
			this.getOrderList()
		},
		//修改对话框
		showBox() {
			this.addressVisible = true
			// this.$refs.addressFormRef.validate(async valid => {           //验证表单通过才能提交
			// 	if (!valid) return
			// })
		},
		//清空修改对话框
		addressDialogClosed() {
			this.$refs.addressFormRef.resetFields()
		},
		//物流对话框
		// async showProgressBox() {
		// 	let res = await this.$axios.get('orders/'+this.getOrderList.order_id)
		// 	if (res.data.meta.status !== 200) {
		// 		return this.$message.error("获取物流信息失败")
		// 	} else {
		// 		this.$message.success("获取物流信息成功")
		// 		this.processInfo = res.data.data
		// 		this.progressVisible = true
		// 		console.log(this.processInfo)
		// 	}

		// }
	}
}
</script>
<style scoped>
.el-table {
	margin: 12px 0;
}
</style>